<template>
  <uploader
    :options="options"
    :file-status-text="statusText"
    class="uploader-example"
    ref="uploaderRef"
    @file-complete="fileComplete"
    @complete="complete"
  >
    <uploader-unsupport></uploader-unsupport>
    <uploader-drop>
      <p>Drop files here to upload or</p>
      <uploader-btn>select files</uploader-btn>
      <uploader-btn :attrs="attrs">select images</uploader-btn>
      <uploader-btn :directory="true">select folder</uploader-btn>
    </uploader-drop>
    <uploader-list></uploader-list>
  </uploader>
</template>

<script lang="ts">
import { defineComponent, nextTick, ref, onMounted } from "vue";
import { merge } from "@/api/fileUpload/index";
export default defineComponent({
  name: "FileUpload",
  setup() {
    const uploaderRef = ref(null);
    const options = {
      target: "//localhost:8090/upload", // '//jsonplaceholder.typicode.com/posts/',
      // 是否开启服务器分片校验，对应GET类型同名的target URL
      testChunks: true,
      chunkSize: 19 * 1024 * 1024,
      forceChunkSize: true,
    };
    const attrs = {
      accept: "image/*",
    };
    const statusText = {
      success: "成功了",
      error: "出错了",
      uploading: "上传中",
      paused: "暂停中",
      waiting: "等待中",
    };
    const complete = function () {
      console.log("complete", arguments);
    };
    // 一个根文件（文件夹）成功上传完成。
    const fileComplete = async (rootFile: any) => {
      const data = await merge({
        name: rootFile.name,
        uniqueIdentifier: rootFile.uniqueIdentifier,
        size: rootFile.size,
        fileType: rootFile.fileType,
      });
      console.log("data", data);
    };
    onMounted(() => {
      nextTick(() => {
        // window.uploader = uploaderRef.value.uploader
      });
    });
    return {
      uploaderRef,
      options,
      attrs,
      statusText,
      complete,
      fileComplete,
    };
  },
});
</script>

<style>
.uploader-example {
  width: 880px;
  padding: 15px;
  margin: 40px auto 0;
  font-size: 12px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.4);
}
.uploader-example .uploader-btn {
  margin-right: 4px;
}
.uploader-example .uploader-list {
  max-height: 440px;
  overflow: auto;
  overflow-x: hidden;
  overflow-y: auto;
}
</style>
